<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单输入绑定</title>
    <script src="./../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            v-model 本质上是一个语法糖，用来监听用户的输入事件以更新数据
                1、文本
                2、多行文本
                3、单选框
                4、复选框
                5、选择框
            
            修饰符
                .lazy   input中绑定事件的修饰符， 在 cahnge 时触发，而非 input时触发
                .number 将input中的字符串直接转化成数字
                .trim   过滤首位空格

            在组件上 使用 v-model
         -->

        <div>
            <div>name: {{ name }}</div>
            <div>age: {{ age }}</div>
            <div>message: {{ message }}</div>
            <div>sex: {{ sex }}</div>
            <div>hobby: {{ hobby }}</div>
            
            <!-- form 表单操作 -->
            <form action="api" name="个人信息收集" style="border: 1px solid blue;">
                <!-- v-model 绑定 文本 -->
                <div>
                    <span>姓名</span>
                    <input type="text" name="name" v-model.lazy="name">
                </div>

                <!-- 选择框 -->
                <div>
                    <span for="old">请选择您的年龄</span>
                    <select name="age" id="old" v-model="age">
                        <option disabled value="">请选择</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                    </select>
                </div>
                
                <!-- v-model 单选框 -->
                <div>
                    <input type="radio" name="sex" id="male" value="男" v-model="sex"><label for="male">男</label>
                    <input type="radio" name="sex" id="female" value="女" v-model="sex"><label for="female">女</label>
                </div>
                <!-- 绑定多选框 -->
                <div>
                    <input type="checkbox" name="hobby" id="hobby1" value="篮球" v-model="hobby"><label for="hobby1">篮球</label>
                    <input type="checkbox" name="hobby" id="hobby2" value="足球" v-model="hobby"><label for="hobby2">足球</label>
                    <input type="checkbox" name="hobby" id="hobby3" value="网球" v-model="hobby"><label for="hobby3">网球</label>
                    <input type="checkbox" name="hobby" id="hobby4" value="舞蹈" v-model="hobby"><label for="hobby4">舞蹈</label>
                    <input type="checkbox" name="hobby" id="hobby5" value="游戏" v-model="hobby"><label for="hobby5">游戏</label>
                </div>

                <!-- v-model 绑定多行文本 -->
                <div>
                    <textarea name="message" cols="30" rows="10" v-model.trim="message"></textarea>
                </div>

                <div>
                    <input type="submit" value="提交" @click.prevent="onClickSubmitButton">
                </div>
            </form>

        </div>

    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                name: null,
                message: null,
                sex: null,
                hobby: [],
                age: null
            },
            methods: {
                onClickSubmitButton(){
                    console.log("onClickSubmitButton")
                }
            },
        })

    </script>
</body>
</html>